<template>
    <div id="particlesDiv">
        <div id="login_outer">
            <div class="input_item"><p>账号</p><input type="text" v-model="username" @keypress.enter="login"/></div>
            <div class="input_item"><p>密码</p><input type="password" v-model="password" @keypress.enter="login"/></div>
            <el-button id="login_button" type="primary" text bg @click="login">登录</el-button>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    import {ElMessage,ElMessageBox} from 'element-plus'
    import * as cookie from "@/utils/cookie.utils.js"

    export default {
        data(){
            return{
                username:"17879386605",
                password:"geeksheep"
            }
        },
        methods: {
            async login() {
                // 假设登陆成功，则跳转到 index 组件
                if(this.username == "" || this.password == "")
                {
                    ElMessageBox.alert("账号密码不能为空！","警告",{
                        confirmButtonText:"确定",
                        callback:(action) => {
                            ElMessage({
                                type:"",
                                message:`action:${action}`,
                            })
                        }
                    })
                }
                let response = await axios.post("/login",{
                    "username":this.username,
                    "password":this.password
                })

                let data = response.data
                if(data.code == 0){
                    data = data.data
                    let expirestime = (new Date(data.expirestime*1000)).toUTCString()
                    Object.keys(data).forEach((key,index) => {
                        if(key == "name"){
                            data[key] = encodeURI(data[key])
                        }
                        cookie.setCookie(key,data[key],expirestime)
                    })
                    this.$router.replace("/index")
                }else{
                    ElMessage.error("账号或密码错误")
                }
            }
        },
        mounted () {
    
            if(cookie.getCookie("token"))
            {
                this.$router.replace("/index")
            }
        },
    }
</script>

<style scoped>
    #particlesDiv {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.B6pZ8N_dG3MNAYppM-zX0AHaEo?pid=ImgDet&rs=1")
    }
    #login_outer{
        position:fixed;
        background-image: linear-gradient(to bottom right,
            rgba(71, 56, 56, 0.6),
            rgba(88, 66, 66, 0.4),
            rgba(60, 54, 54, 0.3)
        );
        padding: 10%;
        box-shadow: 0px 5px 8px rgba(60,60,60,0.8); 
    }
    .input_item{
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items: center;
        font-weight: bold;
        color: beige;
    }
    .input_item > input{
        height:60%;
        box-shadow: 0px 2px 7px rgb(102, 93, 93);
        margin-left: 5px;
        background-color: rgba(50, 47, 47, 0.5);
        border: 0px;
        outline:none !important;
        color:#ffffff;
        font-weight: bolder;
    }

    #login_button{
        margin-top: 20%;
        font-size:20px;
        font-weight:bolder;
        color:#2d3436;
        background-color:#636e7255;
    }
    #login_button:hover{
        background-color:#727f8199;
    }
    .input_item>input:checked{
        border: 2px solid gray !important;
        
    }
</style>